<template>
  <el-card class="box-card" style="width: 100%;height: 100%">
    <breadcrumb :naviItems.sync="naviItems"></breadcrumb>
    <div v-if="showTable" style="width: 100%;height: 100%">
      <div class="table">
        <div class="container">
          <el-table  :data="tableData" max-height="800" style="width: 100%;white-space: pre-line;" fit>
            <el-table-column prop="sydwId" label="序号" width="80"> </el-table-column>
            <el-table-column prop="sydwName" label="使用单位" >
              <template slot-scope="scope">
                <el-button class="cell" type="text"  style="text-decoration: none; color: #606266" @click="gotoDetail(scope.row.sydwName)"  >
                  {{ scope.row.sydwName }}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="单位地址"> </el-table-column>
            <el-table-column prop="manager" label="管理员"> </el-table-column>
            <el-table-column prop="tel" label="联系电话"> </el-table-column>
            <el-table-column prop="devCount" label="设备总量" width="100"> </el-table-column>
            <el-table-column prop="checkPrediction" label="检验预报" width="80"> </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="page">
        <div class="container">
          <el-pagination  background   @size-change="pageSizeChange"  @current-change="pageChange" :current-page="currentPage" :page-sizes="[10, 15, 20, 40]"
            :page-size="args.num"  layout="total, sizes, prev, pager, next, jumper" :total="total"  >
          </el-pagination>
        </div>
      </div>
    </div >

    <div v-if="showDetail" style="width: 100%;height: 100%;">
        <UnitDetail v-bind:sydwName="sydwName" style="height: 100%"></UnitDetail>
    </div>
  </el-card>
</template>

<script>
import Breadcrumb from "../BreadCrumb/BreadCrumb.vue";
import {SydwListSearchArgs} from '../../../../api/chuguan/data-service'
import UnitDetail from "./sydw/UnitDetail";
export default {
  data() {
    return {
      tableData: [
        {sydwId:'1',sydwName:"东北中石油国际事业有限公司",address:'辽宁省大连保税区国际贸易中心E座',tel:"0411-82353752",manager:'王阳',devCount:55,checkPrediction:"/"},
        {sydwId:2,sydwName:"中化南通石化储运有限公司",address:"江苏省南通市经济技术开发区通盛南路1号",manager:"张建华",tel:"0513-85996910",devCount:31,checkPrediction:"/"},
        {sydwId:3,sydwName:"中国石化销售股份有限公司华北分公司津冀输油处",address:"天津市滨海新区塘沽于庄子路13号",manager:"董健",tel:"022-66584089",devCount:3,checkPrediction:"/"},
        {sydwId:4,sydwName:"中国石化集团资产经营管理有限公司巴陵石化分公司",address:"湖南省岳阳市云溪区岳化三工区",manager:"邬智勇",tel:"0730-8492355",devCount:5,checkPrediction:"/"},
        {sydwId:5,sydwName:"中国石化青岛炼油化工有限责任公司",address:"山东省青岛市黄岛区（开发区）千山南路827号",manager:"赵培录",tel:"0532-86915983",devCount:2,checkPrediction:"/"},
        {sydwId:6,sydwName:"中国石油华北油田公司二连分公司哈一联合站",address:"内蒙古自治区锡林郭勒盟锡林浩特市团结大街",manager:"郭志强",tel:"0479-8291002",devCount:1,checkPrediction:"/"},
        {sydwId:7,sydwName:"中国石油华北油田公司二连分公司阿一联合站",address:"内蒙古自治区锡林郭勒盟锡林浩特市团结大街",manager:"郭志强",tel:"0479-8291002",devCount:3,checkPrediction:"/"},
        {sydwId:8,sydwName:"中国石油天然气股份有限公司冀东油田分公司",address:"河北省唐山市曹妃甸工业区",manager:"杨盛杰",tel:"0315-8768637",devCount:1,checkPrediction:"/"},
        {sydwId:9,sydwName:"中国石油天然气股份有限公司华北油田分公司采油二厂",address:"河北霸州市华北油田采油二厂",manager:"潘洪生",tel:"0317-2563003",devCount:2,checkPrediction:"/"},
        {sydwId:10,sydwName:"中国石油天然气股份有限公司华北油田分公司采油五厂",address:"河北省辛集市束鹿大街东段第五采油厂",manager:"王先生",tel:"0317-2742178",devCount:2,checkPrediction:"/"},
        {sydwId:11,sydwName:"中国石油天然气股份有限公司华北石化分公司",address:"",manager:"",tel:"",devCount:3,checkPrediction:""},
        {sydwId:12,sydwName:"中国石油天然气股份有限公司抚顺石化分公司",address:"",manager:"",tel:"",devCount:4,checkPrediction:""},
        {sydwId:13,sydwName:"中国石油天然气股份有限公司抚顺石化分公司石油三厂",address:"",manager:"",tel:"",devCount:5,checkPrediction:""},
        {sydwId:14,sydwName:"中国石油天然气股份有限公司华北石化分公司",address:"",manager:"",tel:"",devCount:16,checkPrediction:""},
        {sydwId:15,sydwName:"中国石油天然气股份有限公司青海油田分公司管道输油处",address:"",manager:"",tel:"",devCount:7,checkPrediction:""},
        {sydwId:16,sydwName:"中国铁路北京局集团有限公司物资供应段丰西油库",address:"",manager:"",tel:"",devCount:2,checkPrediction:""},
        {sydwId:17,sydwName:"中沙(天津)石化有限公司",address:"",manager:"",tel:"",devCount:3,checkPrediction:""},
        {sydwId:18,sydwName:"中海油销售深圳有限公司一湾仓储分公司",address:"",manager:"",tel:"",devCount:6,checkPrediction:""},
        {sydwId:19,sydwName:"中石油燃料油有限责任公司青岛仓储分公司",address:"",manager:"",tel:"",devCount:1,checkPrediction:""},
        {sydwId:20,sydwName:"华宁化工储运有限公司",address:"",manager:"",tel:"",devCount:3,checkPrediction:""},
        {sydwId:21,sydwName:"张家港越洋实业有限公司",address:"",manager:"",tel:"",devCount:4,checkPrediction:""},
        {sydwId:22,sydwName:"沙多玛（广州）化学有限公司",address:"",manager:"",tel:"",devCount:4,checkPrediction:""},
        {sydwId:23,sydwName:"海南实华嘉盛化工有限公司",address:"",manager:"",tel:"",devCount:2,checkPrediction:""},
        {sydwId:24,sydwName:"澳门电力股份有限公司",address:"",manager:"",tel:"",devCount:6,checkPrediction:""},
        {sydwId:25,sydwName:"舟山龙宇燃油有限公司",address:"",manager:"",tel:"",devCount:7,checkPrediction:""},
        {sydwId:26,sydwName:"镇海国家石油储备基地有限责任公司",address:"",manager:"",tel:"",devCount:23,checkPrediction:""},
        {sydwId:27,sydwName:"一湾仓储分公司",address:"",manager:"",tel:"",devCount:6,checkPrediction:""},
      ],
      _tableData: [],
      tag:0,
      total: 27,
      currentPage: 1,
      sydwId: 0,
      sydwName: '',
      args: new SydwListSearchArgs(),
      naviItems: [{ text: '储罐' }, { text: '云服用户', to: '/chuguan/dataService/Sydw' }],
      showTable: true,
      showDetail: false,
      detailData: {},

    }
  },
  async created() {
      this.showTable = true
      this.showDetail = false
      this.args.offset = 0
      this.args.num = 10
     // this.searchData()
      this.pageSizeChange(10)
      this.total=this._tableData.length
  },
  components: {
    Breadcrumb,
    UnitDetail,
  },
  methods: {
    // 获取使用单位列表数据
    /*async searchData() {
      this.loading = true
      const res = await serachSydwList(this.args)
      this.loading = false
      const { list, total } = res.data
      this.total = total
      this.tableData = list
    },*/

    gotoDetail(sydwName) {
      if(sydwName=="东北中石油国际事业有限公司"){
        window.open("http://218.3.150.107:8003/login.html")
      }else {
        this.sydwName=sydwName;
        this.showTable=false;
        this.showDetail=true
      }

    },
    // 页面大小改变
    async pageSizeChange(pageSize) {
      this.args.num = pageSize
      if (this.tag==0){
        this._tableData=this.tableData;
        this.tag=1
      }
      let thirdTable=[]
      if(pageSize<=this._tableData.length){
        for (let i=0;i<pageSize;i++){
          thirdTable.push(this._tableData[i])
        }
        this.tableData=thirdTable
      }else {
        this.tableData=this._tableData
      }
      this.$forceUpdate()
       /* this.args.offset = 0
        this.searchData()*/

    },
    // 页数改变
    async pageChange(page) {
        // this.args.offset = (page - 1) * this.args.num
      this.currentPage = page
       // this.searchData()
      console.log(this.args.num*(page-1),page*this.args.num-1)
      let thirdTable=[]
      if(page*this.args.num-1<this._tableData.length){
        for(let table_start=this.args.num*(page-1);table_start<=page*this.args.num-1;table_start++){
          thirdTable.push(this._tableData[table_start])
        }
        this.tableData=thirdTable
      }else {
        for(let table_start=this.args.num*(page-1);table_start<this._tableData.length;table_start++){
          thirdTable.push(this._tableData[table_start])
        }
        this.tableData=thirdTable
      }
      this.$forceUpdate()
    },
  },
}
</script>

<style lang="less" scoped>
div.page {
  width: 100%;
  display: flex;
  margin-top: 30px;
  flex-direction: row;
  justify-content: flex-end;
  position: relative;
  right: 50px;
}


</style>
